<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>攻略</title>
    <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
    <link rel="stylesheet" type="text/css" href="../assets/css/main.css">
    <script src="../assets/js/vue.min.js"></script>
    <script src="../assets/js/alloy_finger.js"></script>
    <!-- https://github.com/AlloyTeam/AlloyFinger -->
    <script src="../assets/js/alloy_finger.vue.js"></script>
    <!-- <script src="../assets/js/iconfont.js"></script> -->
  </head>
  <body id="target" >
    <div id="app" style="height:100%;width:100%;">
      <div class="topMenu">
        <span class="topMenu_home">星月区 fdfdfdfdfd</span>
        <span class="topMenu_people">个人中心</span>
      </div>
      
      <div class="signInBox" id="signInBox">

        <div v class="signInSearch"><input type="search" v-model="search" placeholder="请输入" @keyup.enter="searchList"></div>
        <div :style="{'height':teamHeight + 'px'}">
        <div class="signIn_list">
          <div class="in_userListLine" >
            <user1 :data1="data1" @changeborders2="changeborders2" @changeshow="changeshow" @changeborder1="changeborder1" @changeborderemit="changeborderemit" @changeborder3="changeborder3" @changeshow2="changeshow2" ></user1>
          </div>

        </div>
        </div>

        <div id="sec_mainsAll" class="sec_masinAll">
          <div class="sec_masinAll_title" >成员名称*yuuiy</div>
          <squareline v-if="isShowSquareline" :arrdata="arrdata" v-on:increment1="increment1"></squareline>
          <div class="secpushLine">
            <div class="secpushLine_button" @click="pushLine"> 插入 </div>
          </div>
        </div>

      </div>
    </div>
    <script type="text/javascript">
      Vue.use(AlloyFingerVue);
      var user3=Vue.extend({
            template:'<div><div class="in_userListLine3"  v-for="(item,index) in data3" @click="changeborder3(index,item.borderColor )" :class="{signIn_border:item.borderColor,signIn_bg:item.borderColor}" >{{ item.name }}</div></div>',
    
            props:{
              data3:[],
              threeIndex:Number
            },
            // data:function(){
            //   return {
            

            //   }
            // },
            mounted(){
         
            },
            methods:{
              changeborder3(index,color){

                if(color === false){
                  this.$emit('changeborder3',this.threeIndex,index,true)
                }else{
                  this.$emit('changeborder3',this.threeIndex,index,false)
                }
                
              }
            }
      })
      var user2=Vue.extend({
            template:'<div><div  v-for="(item,index) in data2" :class="{signIn_border:item.borderColor}" ><div class="in_userListLine2" :class="{signIn_bg:item.borderColor}"'+ 
                    'v-finger:swipe="swipe2.bind(this, index)"'+
                    'v-finger:touch-start="touchStart2"'+
                    'v-finger:touch-move="touchMove2"'+
                    'v-finger:touch-end="touchEnd2"'+
                    'v-finger:touch-cancel="touchCancel2"'+

             '@click="changeborder2(index,item.borderColor )">{{item.name }}</div><user3 :threeIndex="index" :data3="item.child" @changeborder3="changeborder3" v-if="item.isShow2"> </user3></div></div>',
            components:{
                "user3":user3,

            },
            props:{
              data2:[],
              index:Number
            },
            data:function(){
              return {

              }
            },
            mounted(){
              
            },
            methods:{
              changeborder3(threeIndex,index,color){


                this.$emit("changeborder3",this.index,threeIndex,index,color)
              },
              swipe2: function(index,evt) {
                // console.log("swipe" + evt.direction);
                // alert(evt.direction)
                if(evt.direction === 'Left'){
                  this.$emit('changeshows',true,index,this.index)
                }else{
                  this.$emit('changeshows',false,index,this.index)
                }
              },
              touchStart2: function() { console.log('onTouchStart'); },
              touchMove2: function() { console.log('onTouchMove'); },
              touchEnd2: function() { console.log('onTouchEnd'); },
              touchCancel2: function() { console.log('onTouchCancel'); },
              changeborder2:function(index,color){
                if(color === false){
                  this.$emit('changeborders',index,true,this.index)
                }else{
                  this.$emit('changeborders',index,false,this.index)
                }
                
              },
            }
      })
      var squareline=Vue.extend({
            template:
            '<div>'+
            '<div class="sec_squareLine" v-for="(cell,index) in arrdata">'+
            '<div class="sec_squareLineBox">'+
              '<div class="sec_square">'+
                '<div class="sec_square_1"><img :src="cell.country"></div>'+
                '<div class="sec_square_2"><span class="sec_square_span">9000</span></div>'+    
                '<div class="sec_square_3"><span class="sec_square_span">40</span></div>'+  
                '<div class="sec_square_4"><img :src="cell.arms"></div>'+ 
                '<div class="sec_square_5">曹操</div>'+  
              '</div>'+


              '<div class="sec_square">'+
                '<div class="sec_square_1">1</div>'+
                '<div class="sec_square_2">2</div>'+    
                '<div class="sec_square_3">3</div>'+  
                '<div class="sec_square_4">4</div>'+
                '<div class="sec_square_5">5</div>'+
              '</div>'+
              
              '<div class="sec_square">'+
                '<div class="sec_square_1">1</div>'+
                '<div class="sec_square_2">2</div>'+
                '<div class="sec_square_3">3</div>'+
                '<div class="sec_square_4">4</div>'+
                '<div class="sec_square_5">5</div>'+
              '</div>'+

            '</div>'+
            '<div class="sec_squareLineBox" v-if="cell.show">'+
              '<div class="sec_square_content">'+
                '<div class="">关银屏</div>'+
                '<div class="">等级：{{ 40 }}</div>'+
                '<div class="">兵力： {{ 9000 }}</div>'+
                '<div class="sec_square_content_m">自带战法：</div>'+
                '<div class="">战法一：{{ "一骑当关" }}</div>'+
                '<div class="">战法二：{{ "一骑当关" }}</div>'+
                '<div class="sec_square_content_m">加点：{{ 90 }}</div>'+
                '<div class="">攻击：+{{ 15 }}</div>'+
                '<div class="">防御：+{{ 15 }}</div>'+
                '<div class="">策略：+{{ 15 }}</div>'+
                '<div class="">速度：+{{ 15 }}</div>'+
              '</div>'+
              '<div class="sec_square_content">'+
                '<div class="">关银屏</div>'+
                '<div class="">等级：{{ 40 }}</div>'+
                '<div class="">兵力： {{ 9000 }}</div>'+
                '<div class="sec_square_content_m">自带战法：</div>'+
                '<div class="">战法一：{{ "一骑当关" }}</div>'+
                '<div class="">战法二：{{ "一骑当关" }}</div>'+
                '<div class="sec_square_content_m">加点：{{ 90 }}</div>'+
                '<div class="">攻击：+{{ 15 }}</div>'+
                '<div class="">防御：+{{ 15 }}</div>'+
                '<div class="">策略：+{{ 15 }}</div>'+
                '<div class="">速度：+{{ 15 }}</div>'+
              '</div>'+
              '<div class="sec_square_content">'+'</div>'+

            '</div>'+
            '<div class="sec_squareShow" @click="showContent(index)">'+
              '{{ cell.handle}}'+
            '</div>'+
            '</div>'+
          '</div>',
          props:{
            arrdata:[]
          },
          watch:{

          },
          data:function(){
            return {
            }
          },
          mounted(){
            // console.log(this.arrdata)
          },
          methods:{
            showContent:function(index){
              if(this.arrdata[index].show === false){
                this.$emit('increment1',index,true)
              }else{
                this.$emit('increment1',index,false)
              }
              
              // this.$emit('increment1',"这个位子是可以加参数的");
            }
          }

      })

      var user1=Vue.extend({

      // Vue.component("user1",{
      // var user1=Vue.extend({
        template:'<div id="teamHeight"><div v-for="(item,index) in data1" :class="{signIn_border:item.borderColor}" ><div class="in_userListLine1" :class="{signIn_bg:item.borderColor}" '+

       // 'v-finger:swipe="swipe2"'+
        'v-finger:swipe="swipe.bind(this,item.isShow1,index)"'+
        'v-finger:touch-start="touchStart1"'+
        'v-finger:touch-move="touchMove1"'+
        'v-finger:touch-end="touchEnd1"'+
        'v-finger:touch-cancel="touchCancel1"'+

        '@click="changeborder1(item.isShow1,index,item.borderColor )"  >{{item.name }}<span>{{ item.position }}</span></div><user2 :index="index" :data2="item.child" @changeshows="changeshows" @changeborder3="changeborder3" @changeborders="changeborders" v-if="item.isShow1"></user2></div>'+
          '<button class="signIn_launch">发起</button>'+
        '</div>',
        components:{
          "user2":user2
        },
        props:{
          data1:[],
          
        },
        data:function(){
          return {
          }
        },
        mounted(){},
        methods:{
          changeborder3(twoIndex,threeIndex,index,color){

                this.$emit("changeborder3",twoIndex,threeIndex,index,color)
              },
          changeshows:function(isShow,index,num){
            if(isShow === false){
              this.$emit('changeshow2',isShow,index,num)
            }else{
              this.$emit('changeshow2',isShow,index,num)
            }
          },
          changeborder1:function(isShow,index,color){
            this.$emit('changeborder1',isShow,index,color)
            
          },
          changeborders:function(index,color,num){

            this.$emit('changeborders2',index,color,num)
            this.$emit('changeborderemit',0,num,true)//  把最外层删除选中
          },
          swipe: function(isShow,index,evt) {
            if(evt.direction === 'Left'){
              if(isShow === false){
                this.$emit('changeshow',true,index)
              }
            } 
            if(evt.direction === 'Right'){
              if(isShow === true){
                // this.$emit('changeshow',false,index)
              }
            }
          },

          touchStart1: function() { console.log('onTouchStart'); },
          touchMove1: function() { console.log('onTouchMove'); },
          touchEnd1: function() { console.log('onTouchEnd'); },
          touchCancel1: function() { console.log('onTouchCancel'); },

        }
      })

      var Vue = new Vue({
        el: '#app',
        components:{
          'user1':user1,
          'squareline':squareline
        },
        data: {
          abc:'dfd',
          data1:[{
            name:'二三仔',
            position:'盟主',
            url:"",
            borderColor:true,
            isShow1:false,
            child:[
              {
                name:'团1',
                url:"",
                isShow2:false,
                borderColor:false,
                child:[
                  {
                    name:'班1',
                    url:"",
                    borderColor:false,
                  },
                  {
                    name:'班1',
                    borderColor:false,
                  }
                ]
              },
              {
                name:'团2',
                isShow2:false,
                borderColor:false,
                child:[
                  {
                    name:'班2',
                    borderColor:false,
                  },{
                    name:'班2',
                    borderColor:false,
                  }
                ]
              }
            ]
          }],
          cellArray: [
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
            { title:'《率土之滨》 划重点！指挥类战法，可没有那么简单！','time':"03月06日"},
          ],
          rightBoxShow:false,
          startX:0,   //触摸位置
          endX:0,     //结束位置
          moveX: 0,   //滑动时的位置
          disX: 0,    //移动距离
          deleteSlider: '',//滑动时的效果,使用v-bind:style="deleteSlider"
          search:'',//搜索框


          isUserList:false,
          isShowSquareline:false,
          arrdata:[
            {
              country:'魏',//国家
              arms:'弓兵',//兵种
              three:'a3',//可删除


              show:false,//展开
              handle:'展开'
            }
           
          ],

          country_han:"../assets/images/country_han.png",
          country_qun:"../assets/images/country_qun.png",
          country_shu:"../assets/images/country_shu.png",
          country_wei:"../assets/images/country_wei.png",
          country_wu:"../assets/images/country_wu.png",
          Arms_1:"../assets/images/Arms_1.png",
          Arms_2:"../assets/images/Arms_2.png",
          Arms_3:"../assets/images/Arms_3.png",
          teamHeight:'94'
        },
        mounted:function(){
          this.start()
          // alert()
          this.changeArrdata()
        },
        watch:{
          // 
          'data1':{
                handler:function(newValue,oldValue){
                    setTimeout(()=>{
                      var height = document.getElementById("teamHeight").offsetHeight
                      this.teamHeight = height
                    },100)
                    
                },
                deep:true,
          }
      
        },
        methods: {
          searchList:function(){
            alert(3)
          },
          changeborder3(twoIndex,threeIndex,index,color){
                console.log('99999fdfdfdfd')
                console.log(twoIndex)
                console.log(threeIndex)
                console.log(index)
                 console.log(color)
                 this.data1[twoIndex].child[threeIndex].child[index].borderColor = color
                 this.$set(this.data1[twoIndex],'borderColor',false)
                 this.data1[twoIndex].child[threeIndex].borderColor = false
          },
          start:function(){
            let height = window.screen.availHeight 
            document.getElementById("signInBox").style.height = (height - 36) + "px"
            // document.getElementById("in_rightBox").style.height = (height - 56) + "px"
          },
          changeshow2(isShow,index,num){
            this.data1[num].child[index].isShow2 = isShow
          },
          changeshow:function(isShow,index){
            this.$set(this.data1[index],'isShow1',isShow)
          },
          // 团 级  改变 选中状态
          changeborders2:function(index,color,num){

            this.data1[num].child[index].borderColor = color
            var _this = this
             this.data1[num].child[index].child.forEach(function(val,_index){
                 _this.data1[num].child[index].child[_index].borderColor = false
             })
             console.log(this.data1[num])
          },
          // 盟主级  改变  选中状态
          changeborder1:function(isShow,index,color){
            if(color === false){
              this.$set(this.data1[index],'borderColor',true)
            }else{
              this.$set(this.data1[index],'borderColor',false)
            }
            var _this = this
            this.data1[index].child.forEach(function(val,ind){
              _this.data1[index].child[ind].borderColor = false
               _this.data1[index].child[ind].child.forEach(function(value,i){
                _this.data1[index].child[ind].child[i].borderColor = false
              })

            })
          },
          // 盟主级  改变  选中状态
          changeborderemit:function(isShow,index,color){
            if(color === false){
              this.$set(this.data1[index],'borderColor',true)
            }else{
              this.$set(this.data1[index],'borderColor',false)
            }

          },

          changeArrdata:function(){
            // 也可以直接返回countru: "../assets/images/country_han.png",
            // 取到数据后调用该方法，把 arrdata的 国家 和 兵种替换
            // country:'魏',
            // country:country_han,
            var _this = this
            this.arrdata.forEach(function(val,index){
              // 改变国家
              if(val.country === '汉'){
                _this.arrdata[index].country = _this.country_han
              }else if(val.country === '魏'){
                _this.arrdata[index].country = _this.country_wei
              }else if(val.country === '群'){
                _this.arrdata[index].country = _this.country_qun
              }else if(val.country === '蜀'){
                _this.arrdata[index].country = _this.country_shu
              }else if(val.country === '吴'){
                _this.arrdata[index].country = _this.country_wu
              }
              // 改变  兵种
              if(val.arms === '骑兵'){
                _this.arrdata[index].arms = _this.Arms_1
              }else if(val.arms === '步兵'){
                _this.arrdata[index].arms = _this.Arms_3
              }else if(val.arms === '弓兵'){
                _this.arrdata[index].arms = _this.Arms_2
              }

              // 数据 更改完毕后   打开  视图         
              
            })
            this.isShowSquareline = true
          },
          // start:function(){
          //   let height = window.screen.availHeight 
          //   document.getElementById("sec_mainAll").style.height = (height - 57) + "px"
          // },
          pushLine:function (){
            var obj = {
              country:'吴',//国家
              arms:'a1',//兵种
              three:'h3',//可删除
              show:false,
              handle:'展开'
            }
            this.arrdata.push(obj)
            console.log(this.arrdata)
          },
          increment1:function(index,isShow){
            if(isShow === true){
              this.arrdata[index].show = true
              this.arrdata[index].handle = '关闭'
            }else{
              // alert('guanbi')
              this.arrdata[index].show = false
              this.arrdata[index].handle = '展开'
            }            
          }

        },

      })
    </script>
  </body>
</html>
